import * as echarts from 'echarts';
import { deepMerge } from './util';

// 基础折线图
class LineBase {
  static defaultOptions = {
    areaColors: [
      { offset: 0, color: 'rgba(0,255,234, 0.3)' },
      { offset: 1, color: 'rgba(0, 255, 234, 0)' },
    ],
    grid: {
      top: 50,
      left: '0',
      right: 250,
      bottom: 32,
      containLabel: true,
    },
    dataZoom: {
      type: 'inside',
      realtime: true,
      start: 0,
      end: 10,
    },
    smooth: false,
    symbol: {
      symbolSize: 6,
      color: '#00FFFF',
      shape: 'circle',
    },
    splitLine: {
      color: 'rgba(255, 255, 255, 0.2)',
    },
    lineColor: '#00FFFF',
    tooltip: {
      backgroundColor: 'rgba(0,255,234, 0.3)',
      color: '#00FFFF',
      fontSize: 20,
      fontWeight: 800,
    },
    splitNumber: 6,
    xAxisLabel: {
      color: '#00FFEA',
      fontSize: 10,
      margin: 12,
      interval: 0,
      lineHeight: 14,
    },
    yAxisLabel: {
      color: '#00FFEA',
      fontSize: 12,
      margin: 12,
    },
    lineName: ['今日（1~18）', '昨日（1~17）'],

    showMin: false,
    // 是否单一
    isSingle: false,
    // 是否为季度横坐标
    isQuarterly: true,
  };
  constructor(container, options) {
    this.container = container;
    this.options = deepMerge({}, LineBase.defaultOptions, options);
    this.initChart();
  }
  initChart() {
    if (!this.chart) {
      this.chart = echarts.init(this.container);
    }
  }

  updateOptions() {
    const {
      smooth,
      symbol,
      splitLine,
      splitNumber,
      xAxisLabel,
      yAxisLabel,
      lineName,
      isSingle,
      isQuarterly,
      grid,
      dataZoom,
    } = this.options;

    this.chart.setOption(
      {
        legend: {
          show: true,
          right: 0,
          icon: 'circle',
          data: lineName,
          textStyle: {
            color: '#fff',
          },
        },
        grid,
        dataZoom,
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: isQuarterly
            ? this.data[0].map((item) => item.name)
            : Array.from(new Array(12)).map((i, index) => `${index + 1}月`),
          axisTick: {
            show: false,
            alignWithLabel: true,
            lineStyle: {
              color: '#bbb',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0)',
            },
          },
          axisLabel: {
            ...xAxisLabel,
            ...(isQuarterly
              ? {
                  formatter: function(value) {
                    return value
                      .split('：')
                      .reverse()
                      .join('\n');
                  },
                }
              : {}),
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
            },
          },
        },
        yAxis: {
          scale: true,
          splitNumber,
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: splitLine.color,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
            },
          },
          axisLabel: yAxisLabel,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
          // triggerOn: 'click',
          padding: 10,
          backgroundColor: 'rgba(0, 0, 0, 0.56)',
          borderColor: 'rgba(255, 255, 255, 0.1)',
          textStyle: {
            color: '#fff',
            width: 100,
            overflow: 'break',
          },
          renderMode: 'html',
          className: 'line-tip',
          formatter: (value) => {
            const axisValue = value[0].axisValue;
            const dataIndex = value[0].dataIndex;
            return (
              '<div class="tooltip-self">' +
              '<p style="margin-bottom: -20px;">' +
              value[0].axisValue +
              '</p>' +
              [
                isQuarterly ? this.data[0][dataIndex].axis : axisValue,
                `${value[0].marker || ''}${
                  value[0].seriesName
                }:   <span style="font-weight: 800;margin-left: 10px;">${(value[0]
                  .data
                  ? value[0].data + '万kw'
                  : '') || '-'}</span><br><span>监测企业数量：${
                  value[0].seriesName.indexOf('昨日') > -1
                    ? this.data[1][dataIndex].compNum
                    : this.data[0][dataIndex].compNum
                }家</span>`,
                isSingle || !value[1]
                  ? ''
                  : `${value[1].marker || ''}${
                      value[1].seriesName
                    }:   <span style="font-weight: 800;margin-left: 10px;">${(value[1]
                      .data
                      ? value[1].data + '万kw'
                      : '') || '-'}</span><br><span>监测企业数量：${
                      this.data[1][dataIndex].compNum
                    }家</span>`,
              ].join('<br />') +
              '</div>'
            );
          },
        },
        series: [
          {
            name: lineName[0],
            type: 'line',
            barWidth: '60%',
            data: this.data[0].map((item) => item.value),
            symbol: symbol.shape,
            smooth,
            symbolSize: symbol.symbolSize,
            animationDuration: 500,
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(5, 166, 252, 1)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(103, 248, 179, 1)', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              width: 2,
            },
            itemStyle: {
              color: '#00FFFF',
            },
          },
          ...(isSingle
            ? []
            : [
                {
                  name: lineName[1],
                  type: 'line',
                  barWidth: '60%',
                  data: this.data[1].map((item) => item.value),
                  symbol: symbol.shape,
                  smooth,
                  symbolSize: symbol.symbolSize,
                  animationDuration: 500,
                  lineStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(255, 144, 62, 1)', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(255, 209, 84, 1)', // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    width: 2,
                  },
                  itemStyle: {
                    color: 'rgba(255, 253, 46, 1)',
                  },
                },
              ]),
        ],
      },
      true,
    );
  }

  setData(data, options = {}) {
    this.data = data;
    this.options = deepMerge({}, this.options, options);
    this.updateOptions();
  }

  destroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
}

export default LineBase;
